<template>
    <div class='w100 h100' id="main-chart3">

    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            option: {}
        }
    },
    created() { },
    mounted() {


        var chartDom = document.getElementById('main-chart3');
        var myChart = this.$echarts.init(chartDom);

        this.option = {
            title: {
                text: 'World Population'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                }
            ]
        };

        myChart.setOption(this.option);


    },
    methods: {}
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
